<!-- 应用名称设置 -->
<template>
    <el-dialog
        v-model="showDialog"
        title="基本设置"
        width="360px"
        append-to-body
        destroy-on-close
    >
        <el-scrollbar>
            <div class="row-wrap">
                <div class="left-wrap">
                    应用名称
                </div>
                <div class="right-wrap">
                    <el-input v-model="config.appName" placeholder="请输入应用名称" />
                </div>
            </div>

            <div class="row-wrap flex-start">
                <div class="left-wrap">
                    应用描述
                </div>
                <div class="right-wrap">
                    <el-input
                        v-model="config.appDescription"
                        :rows="5"
                        type="textarea"
                        placeholder="请输入应用描述"
                    />
                </div>
            </div>

            <div class="row-wrap flex-start">
                <div class="left-wrap">
                    应用头像
                </div>
                <div class="right-wrap">
                    <image-picker
                        v-model="config.appAvaterUrl"
                        :show-label="false"
                        :size="100"
                        type="image"
                    />
                </div>
            </div>

            <div class="row-wrap">
                <div class="left-wrap">
                    数据动态化
                </div>
                <div class="right-wrap">
                    <el-switch v-model="config.isDynamicData" />
                </div>
            </div>
        </el-scrollbar>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="onCancel">取消</el-button>
                <el-button type="primary" :loading="saveLoading" @click="onConfirm">确认</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script>
import { defineComponent, ref, computed } from 'vue'
import { useEditStore } from '@/store'
import { ElMessage } from 'element-plus'
import { saveApp } from '@/api/app'
export default defineComponent({
    name: 'AppNameSetting',
    setup() {
        const showDialog = ref(false)
        const saveLoading = ref(false)
        const config = ref({})

        const editStore = useEditStore()

        const appName = computed({
            get: () => editStore.appName,
            set: val => editStore.appName = val
        })
        const appDescription = computed({
            get: () => editStore.appDescription,
            set: val => editStore.appDescription = val
        })
        const appAvaterUrl = computed({
            get: () => editStore.appAvaterUrl,
            set: val => editStore.appAvaterUrl = val
        })
        const isDynamicData = computed({
            get: () => editStore.isDynamicData,
            set: val => editStore.isDynamicData = val
        })
        // 当前页面控件列表(扁平化)
        const widgetListFlat = computed(() => editStore.widgetListFlat)

        const show = () => {
            showDialog.value = true
            config.value = {
                appName: appName.value,
                appDescription: appDescription.value,
                appAvaterUrl: appAvaterUrl.value,
                isDynamicData: isDynamicData.value
            }
        }

        const onCancel = () => {
            // config.value = {}
            showDialog.value = false
        }
        const onConfirm = () => {
            saveLoading.value = true
            saveApp({
                params: {
                    Name: config.value.appName,
                    Description: config.value.appDescription,
                    AvaterUrl: config.value.appAvaterUrl,
                    IsDynamicData: config.value.isDynamicData ? 1 : 0,
                    NeedNewVersion: 0 // 无新版本产生
                }
            }).then(res => {
                if (res.Status === 1) {
                    ElMessage({
                        message: '保存成功',
                        grouping: true,
                        type: 'success'
                    })
                    appName.value = config.value.appName
                    appDescription.value = config.value.appDescription
                    appAvaterUrl.value = config.value.appAvaterUrl
                    isDynamicData.value = config.value.isDynamicData
                    showDialog.value = false
                } else {
                    ElMessage({
                        message: '保存失败',
                        grouping: true,
                        type: 'error'
                    })
                }
            }).catch(() => {
                ElMessage({
                    message: '保存失败',
                    grouping: true,
                    type: 'error'
                })
            }).finally(() => {
                saveLoading.value = false
            })
        }

        return {
            showDialog,
            saveLoading,
            config,

            show,
            onCancel,
            onConfirm
        }
    }
})
</script>

<style lang="less" scoped>
.row-wrap {
    display: flex;
    align-items: center;
    & + .row-wrap {
        margin-top: 18px;
    }
    &.flex-start {
        align-items: flex-start;
    }
    .left-wrap {
        margin-right: 10px;
    }
    .right-wrap {
        flex: 1;
    }
}
</style>